import { Draw } from "../Draw/Draw";
import { FooterMenuTemp } from "../Template/FooterMenuTemp";

/**
 * 底部功能区
 */
export class FooterMenu {
  private draw: Draw;

  constructor(draw: Draw) {
    this.draw = draw;
    this.init();
  }

  private init() {
    const root = this.draw.getRootBox();
    const eventbus = this.draw.getEventBus();

    const FooterMenu = document.createElement("div");
    FooterMenu.className = "konva-root-footer";
    FooterMenu.innerHTML = FooterMenuTemp;
    root.appendChild(FooterMenu);

    // 幻灯片数量
    const number = <HTMLElement>FooterMenu.querySelector(".slide-num");
    // 缩放比例
    const scaleSpan = <HTMLElement>FooterMenu.querySelector(".zoom-num-scale");

    // 监听 thumbChanged
    eventbus.on("thumbChanged", (arr) => {
      // 还需要拿到当前的index
      const index = this.draw.getLayerManager().getCurrentIndex()!;
      number.innerText = `${index + 1} / ${arr.length}`;
    });

    // 监听缩放
    eventbus.on("zoom", (scale) => {
      scaleSpan.innerText = `${parseInt(String(scale * 100))}%`;
    });

    // 监听 Uni Theme 、智能美化 、 preview - 按钮事件
    const command = this.draw.getCommand();
    const uniThemeBtn = FooterMenu.querySelector(".zhuti");
    const smartBtn = FooterMenu.querySelector(".meihua");
    const previewBtn = FooterMenu.querySelector("svg");

    uniThemeBtn?.addEventListener("click", command.setTheme);
    smartBtn?.addEventListener("click", command.executeBeautify);
    previewBtn?.addEventListener("click", command.executePreviewCurrent);
  }
}
